import React, { Component } from 'react';
import { observer, inject } from "mobx-react";
import { Button, Spin, Icon  } from 'antd';
import cass from 'classnames';
import styles from './index.module.less';
import avatar from '../../assets/icon.png';
import CloseBar from '../../components/CloseBar';

@inject(({ loginState }) => ({ loginState }))
@observer
class Login extends Component {
    state = {
        isLogining: false
    }

    componentDidMount() {
        // 用户第一次打开，未登录过的时候限制必须扫码
        // this.userid = window.localStorage.getItem('userId');
        // if (!this.userid) {
            this.scanToLogin();
        // }
    }

    onLogin = async () => {
        this.setState({ isLogining: true })
        const { loginState } = this.props;
        loginState.login(this.createMainWin);

    }

    scanToLogin = () => {
        const { loginState } = this.props;
        loginState.setStateValue('scanToLogin', true);
        loginState.getCode(this.createMainWin);
    }

    backLogin = () => {
        const { loginState } = this.props;
        loginState.setStateValue('scanToLogin', false);
    }

    createMainWin(token) {
        // 跟主线程发起通讯
        const { ipcRenderer } = window.electron;
        if (token) {
            ipcRenderer.send('login', { token });
        } else {
            ipcRenderer.send('show-error-dialog', {
                title: 'error',
                content: 'Login error'
            });
        }
    }

    render() {
        const { imgepath, scanToLogin, isLogining } = this.props.loginState;
        return (
            <div className={cass(styles.content, { [styles.loginActive]: scanToLogin })}>
                <div className={styles.drag} />
                <CloseBar />
                {/* <div className={styles.wrapLogin}>
                    <div className={styles.avatar}>
                        <img src={avatar} alt="" />
                    </div>
                    <p>{window.localStorage.getItem('realname')}</p>
                    <div className={styles.login}>
                        {
                            isLogining ?
                                <p>请在手机上确认登录</p> :
                                <Button type="primary" ghost onClick={this.onLogin}>登 录</Button>
                        }
                    </div>
                    {
                        !isLogining ?
                            <div className={styles.change} onClick={this.scanToLogin}>切换账号</div> :
                            <div>正在等待确认<div className="dot" /></div>
                    }
                </div> */}

                {isLogining ? <div className={styles.loginLoading}>
                    <Spin tip="登录中..." indicator={<Icon type="loading" style={{ fontSize: 32, marginBottom: 8 }} spin />} />
                </div> :
                <div className={styles.wrapQrcode}>

                    <div className={styles.qrcode}>
                        <img src={imgepath} alt="" />
                    </div>
                    <p>请使用法力扫一扫以登录</p>
                </div>}
            </div>
        );
    }
}
export default Login;
